$max-tab-count: 10;
$tab-wrap-border-radius: 6px;

.tab-wrap {
	transition: 0.3s box-shadow ease;
	border-radius: $tab-wrap-border-radius;
	display: flex;
	position: relative;
	list-style: none;
	height: 100%;
	flex-direction: column;
}

.header {
	display: flex;
	margin-left: 3px;
}

.tab {
	display: none;
	@for $i from 1 through $max-tab-count {
		&:checked:nth-of-type(#{$i}) ~ .tab__content:nth-of-type(#{$i}) {
			opacity: 1;
			transition: 0.5s opacity ease-in, 0.8s transform ease;
			position: relative;
			top: 0;
			z-index: 100;
			transform: translateY(0px);
			text-shadow: 0 0 0;
			display: flex;
		}
	}
	&:first-of-type:not(:last-of-type) + label {
		border-top-right-radius: 0;
		border-bottom-right-radius: 0;
	}
	&:not(:first-of-type):not(:last-of-type) + label {
		border-radius: 0;
	}
	&:last-of-type:not(:first-of-type) + label {
		border-top-left-radius: 0;
		border-bottom-left-radius: 0;
	}
	&:checked + label {
		background-color: #fff;
		box-shadow: 0 -1px 0 #fff inset;
		cursor: default;
		background: #ff9800;
	}
	+ label {
		box-shadow: 0 -1px 0 #eee inset;
		border-radius: 6px 6px 0 0;
		cursor: pointer;
		display: block;
		text-decoration: none;
		background-color: #2196f3;
		user-select: none;
		text-align: center;
		transition: 0.3s background-color ease, 0.3s box-shadow ease;
		height: 35px;
		box-sizing: border-box;
		padding: 10px;
		width: auto;
		flex-grow: 0;
		margin: 0 2px 0px 0;
		color: #fff;
	}
	&:not(:checked) + label {
		&:hover {
			background-color: #ff9800;
		}
	}
	&__content {
		display: flex;
		background: #f1f1f1;
		border: #cecece 1px solid;
		margin-top: -2px;
		z-index: 0;
		padding-top: 2px;
		flex: 1 0 100px;
		overflow-y: auto;
	}
}
